<!--  -->
<template>
  <base-modal :title="title" :show.sync="visible" width="450px">
    <el-form ref="form" :model="form" :rules="rules" label-position="top">
      <el-form-item :label="$t('common.base.name')" prop="name">
        <el-input
          :placeholder="$t('common.placeholder.inputSomething', {data1:''})"
          v-model="form.name"
          show-word-limit
          maxlength="10"
        />
      </el-form-item>
      <el-form-item :label="$t('common.base.link')" prop="link">
        <el-input
          :placeholder="$t('common.placeholder.inputSomething', {data1:''})"
          v-model="form.link"
          maxlength="100"
          show-word-limit
        />
        <p class="tips">{{$t('wiki.setting.outsideSearchDialog.tips1')}}</p>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">{{$t('common.base.cancel')}}</el-button>
      <el-button :loading="submitLoading" type="primary" @click="confirm">{{$t('common.base.save')}}</el-button>
    </div>
  </base-modal>
</template>

<script>
import { createWikiOutsideSearch, updateWikiOutsideSearch } from "@src/api/SettingApi.ts";
import i18n from '@src/locales'

export default {
  data() {
    const checkLink = (rule, value, cb) => {
      if(!value) {
        cb(new Error(this.$t('wiki.setting.outsideSearchDialog.tips2')))
      }
      const regLink = /(http|https):\/\/([\w.]+\/?)\S*/;
      if (regLink.test(value)) {
        return cb();
      }
      cb(new Error(this.$t('wiki.setting.outsideSearchDialog.tips3')));
    };
    return {
      visible: false,
      title: "",
      form: {
        name: '',
        link: ''
      },
      id: "",
      rules: {
        name: { required: true, message: i18n.t('common.placeholder.inputSomething', {data1:i18n.t('common.base.name')}), trigger: 'change' },
        link: { required: true, validator: checkLink, trigger: 'change' }
      },
      mode: 'create',
      submitLoading: false
    }
  },
  methods: {
    openDialog(mode, data) {
      this.mode = mode
      if (mode === "create") {
        this.title = this.$t('wiki.setting.outsideSearchDialog.title1')
        this.form = {
          name: '',
          link: ''
        }
      } else {
        this.title = this.$t('wiki.setting.outsideSearchDialog.title2')
        this.form = {...data}
      }

      this.visible = true;
    },

    confirm() {
      let flag = true
      this.$refs['form'].validate(valid => {
        flag = valid
      })
      if (!flag) return

      this.submit()
    },
    async submit() {
      try {
        this.submitLoading = true
        let fn = this.mode === 'create' ? createWikiOutsideSearch : updateWikiOutsideSearch
        const result = await fn(this.form)
        this.submitLoading = false
        if (result.succ) {
          this.visible = false;
          this.$parent.getAllWikiOutsideSearch()
        }
        let message = result.succ ? this.$t('common.base.tip.saveSuccess') : result.message
        this.$message({
          showClose: true,
          duration: 1500,
          message,
          type: result.succ ? "success" : "error"
        });
      } catch (error) {
        console.error("create rule error", error);
        this.submitLoading = false
      }
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .base-modal-body {
  padding: 30px 40px;
}
.dialog-main {
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  div {
    margin-top: 5px;
  }
}
.tips {
  margin: 4px 0 0;
  font-size: 12px;
  color: #8c8c8c;
}
</style>
